import React from 'react';
import "./login.scss"
import { userLogin } from '../../kwl';
import { useNavigate } from 'react-router-dom';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, notification } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import lod from "../../img/load.png"
// import { login } from '../../api/mxh';
const Login = () => {
    var checkedKeys = useSelector((state: any) => state.checkedKeys)
    var dispatch = useDispatch()
    const navigate = useNavigate()
    const onFinish = async (values: any) => {
        var res = await userLogin(values)
        console.log(res.data);
        if (res.data.code == 200) {
            dispatch({ type: 'SAVE_CHECKDKEYS', payload: res.data.data })
            notification.success({ message: '登录成功' })
            navigate('/index')
        } else {

            notification.error({ message: '登录成失败不是公司员工' })
        }
        // var res = await login(values)
        // console.log(res.data);

        // if (res.data.code == 200) {
        //     dispatch({ type: 'SAVE_CHECKDKEYS', payload: res.data.data })
        //     console.log(checkedKeys);
        //     notification.success({ message: '登录成功' })
        //     navigate('/index')
        // } else if (res.data.code == 201) {
        //     notification.error({ message: '账号不存在' })
        // } else {
        //     notification.error({ message: '密码错误' })

        // }
    }
    return (
        <div className='login'>
            <div className='box'>
                <div className="login_header">
                    <img src={lod} alt="" />
                    <span>电商后台管理</span>
                </div>

                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    style={{ width: "320px" }}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入账号' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                            autoComplete='off'
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default Login;